export const dimensionalBar3 = () => {
    return `

  
  
    <template>
    <div
      class="content"
      :style="{
        height: height,
        width: width,
      }"
    >
        <div :ref="echartsMap" id="mainChina"></div>
    </div>
  </template>
  
  <script setup>
  import { ref, reactive, nextTick, onMounted, watch } from "vue";
  import  "echarts";
 const offsetX = 9.04;
  const offsetY = 4;
  const barWidth = 30;
  // 绘制左侧面
  const CubeLeft2 = echarts.graphic.extendShape({
    shape: {
      x: 0,
      y: 0,
    },
    buildPath: function(ctx, shape) {
      // 会canvas的应该都能看得懂，shape是从custom传入的
      const xAxisPoint = shape.xAxisPoint;
      // console.log(shape);
      const c0 = [shape.x, shape.y];
      const c1 = [shape.x - offsetX, shape.y - offsetY];
      const c2 = [xAxisPoint[0] - offsetX, xAxisPoint[1] - offsetY];
      const c3 = [xAxisPoint[0], xAxisPoint[1]];
      ctx
        .moveTo(c0[0], c0[1])
        .lineTo(c1[0], c1[1])
        .lineTo(c2[0], c2[1])
        .lineTo(c3[0], c3[1])
        .closePath();
    },
  });
  // 绘制右侧面
  const CubeRight2 = echarts.graphic.extendShape({
    shape: {
      x: 0,
      y: 0,
    },
    buildPath: function(ctx, shape) {
      const xAxisPoint = shape.xAxisPoint;
      const c1 = [shape.x, shape.y];
      const c2 = [xAxisPoint[0], xAxisPoint[1]];
      const c3 = [xAxisPoint[0] + offsetX, xAxisPoint[1] - offsetY];
      const c4 = [shape.x + offsetX, shape.y - offsetY];
      ctx
        .moveTo(c1[0], c1[1])
        .lineTo(c2[0], c2[1])
        .lineTo(c3[0], c3[1])
        .lineTo(c4[0], c4[1])
        .closePath();
    },
  });
  // 绘制顶面
  const CubeTop2 = echarts.graphic.extendShape({
    shape: {
      x: 0,
      y: 0,
    },
    buildPath: function(ctx, shape) {
      const c1 = [shape.x, shape.y];
      const c2 = [shape.x + offsetX, shape.y - offsetY]; //右点
      const c3 = [shape.x, shape.y - offsetX];
      const c4 = [shape.x - offsetX, shape.y - offsetY];
      ctx
        .moveTo(c1[0], c1[1])
        .lineTo(c2[0], c2[1])
        .lineTo(c3[0], c3[1])
        .lineTo(c4[0], c4[1])
        .closePath();
    },
  });
  // 注册三个面图形
  echarts.graphic.registerShape("CubeLeft2", CubeLeft2);
  echarts.graphic.registerShape("CubeRight2", CubeRight2);
  echarts.graphic.registerShape("CubeTop2", CubeTop2);
const getYAxis = () => {
      return {
        axisLabel: {
          color: "#D3E4FE",
          fontSize: 14,
        },
        axisTick: {
          show: false,
        },
        splitLine: {
          show: false,
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: "rgba(0, 168, 255, 0.3)",
          },
        },
      }
  }
const props = {
    "color": {
        "dataPC": [
            {
                "CubeLeft2": [
                    "#4E73A3",
                    "#4E73A3"
                ],
                "CubeRight2": [
                    "#4E73A3",
                    "#4E73A3"
                ],
                "CubeTop2": [
                    "#4E73A3"
                ]
            },
            {
                "CubeLeft2": [
                    "#24FFE1",
                    "#009FFA"
                ],
                "CubeRight2": [
                    "rgba(36, 240, 255, 1)",
                    "rgba(0, 125, 250, 1)"
                ],
                "CubeTop2": [
                    "rgba(35, 235, 255, 1)"
                ]
            }
        ],
        "dataMobile": [
            [
                {
                    "offset": 0,
                    "color": "rgba(225, 225, 225, 1)"
                },
                {
                    "offset": 1,
                    "color": "rgba(225, 225, 225, 1)"
                }
            ],
            [
                {
                    "offset": 0,
                    "color": "rgba(17, 196, 229, 1)"
                },
                {
                    "offset": 1,
                    "color": "rgba(17, 196, 229, 1)"
                }
            ]
        ]
    },
    "pricePermissions": true,
    "source": [
        {
            "预算": 1500,
            "单位": "公司1",
            "工资总额": 1702.24
        },
        {
            "预算": 5000,
            "单位": "公司2",
            "工资总额": 1702.58
        },
        {
            "预算": 6000,
             "单位": "公司3",
            "工资总额": 1702.18
        },
        {
            "预算": 1020,
            "单位": "公司4",
            "工资总额": 1702.34
        },
   
    ],
    "panelType": null,
    "dimensions": [
        "单位",
        "预算",
        "工资总额"
    ]
}
  /*
  基本数据类型
  引用数据类型（复杂类型） 个人建议 ref初始化变量 
  ref 和 reactive 本质我们可以简单的理解为ref是对reactive的二次包装, 
  ref定义的数据访问的时候要多一个.value
  */
  const state = reactive({
    option:  {},
  });

  const colorArr = props.color.dataPC;
    let series = [];
  let xData = props.source.map((res) => res[props.dimensions[0]]);
  let legendArr = props.dimensions.splice(1);
  let datas = [];
     datas.push({
      qian:props.source.map((res) => res[legendArr[1]]),
      hou:props.source.map((res) => res[legendArr[0]]),
    });
  datas.forEach((item, index) => {
    series.push(
      {
        type: "custom",
        z:-1,
        name: legendArr[0],
        // tooltip:{
        //   show:false
        // },
        renderItem: (params, api) => {
          const location = api.coord([api.value(0), api.value(1)]);
          return {
            type: "group",
            
            x: (index - datas.length / 2) * barWidth + 15,
            children: [
              {
                type: "CubeLeft2",
                shape: {
                  api,
                  xValue: api.value(0),
                  yValue: api.value(1),
                  x: location[0],
                  y: location[1],
                  xAxisPoint: api.coord([api.value(0), 0]),
                },
                style: {
                  fill: new echarts.graphic.LinearGradient(0, 0, 1, 1, [
                    {
                      offset: 0,
                      color: "#4C72A2",
                    },
                    {
                      offset: 1,
                      color: "#4C72A2",
                    },
                  ]),
                },
              },
              {
                type: "CubeRight2",
                shape: {
                  api,
                  xValue: api.value(0),
                  yValue: api.value(1),
                  x: location[0],
                  y: location[1],
                  xAxisPoint: api.coord([api.value(0), 0]),
                },
                style: {
                  fill: new echarts.graphic.LinearGradient(0, 0, 1, 1, [
                    {
                      offset: 0,
                      color: "#39567B",
                    },
                    {
                      offset: 1,
                      color: "#39567B",
                    },
                  ]),
                },
              },
              {
                type: "CubeTop2",
                shape: {
                  api,
                  xValue: api.value(0),
                  yValue: api.value(1),
                  x: location[0],
                  y: location[1],
                  xAxisPoint: api.coord([api.value(0), 0]),
                },
                style: {
                  fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {
                      offset: 0,
                      color: "#4C72A2",
                    },
                    {
                      offset: 1,
                      color: "#4C72A2",
                    },
                  ]),
                },
              },
            ],
          };
        },
        data: item.hou,
      },
      {
        type: "custom",
        name: legendArr[1],

        renderItem: (params, api) => {
          const location = api.coord([api.value(0), api.value(1)]);
          return {
            type: "group",
            x: (index - datas.length / 2) * barWidth + 15,
            children: [
              {
                type: "CubeLeft2",
                shape: {
                  api,
                  xValue: api.value(0),
                  yValue: api.value(1),
                  x: location[0],
                  y: location[1],
                  xAxisPoint: api.coord([api.value(0), 0]),
                },
                style: {
                  fill: new echarts.graphic.LinearGradient(0, 0, 1, 1, [
                    {
                      offset: 0,
                      color: colorArr[1].CubeLeft2[0],
                    },
                    {
                      offset: 1,
                      color: colorArr[1].CubeLeft2[1],
                    },
                  ]),
                },
              },
              {
                type: "CubeRight2",
                shape: {
                  api,
                  xValue: api.value(0),
                  yValue: api.value(1),
                  x: location[0],
                  y: location[1],
                  xAxisPoint: api.coord([api.value(0), 0]),
                },
                style: {
                  fill: new echarts.graphic.LinearGradient(0, 0, 1, 1, [
                    {
                      offset: 0,
                      color: colorArr[1].CubeRight2[0],
                    },
                    {
                      offset: 1,
                      color: colorArr[1].CubeRight2[1],
                    },
                  ]),
                },
              },
              {
                type: "CubeTop2",
                shape: {
                  api,
                  xValue: api.value(0),
                  yValue: api.value(1),
                  x: location[0],
                  y: location[1],
                  xAxisPoint: api.coord([api.value(0), 0]),
                },
                style: {
                  fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {
                      offset: 0,
                      color: colorArr[1].CubeTop2[0],
                    },
                    {
                      offset: 1,
                      color: colorArr[1].CubeTop2[0],
                    },
                  ]),
                },
              },
            ],
          };
        },
        data: item.qian,
      },
      // {
      //   type: "bar",
      //   z:3,
      //   barWidth: 25, //当前适配，更改需要同时更改 offsetX,offsetY,barWidth
      //   label: {
      //      show: false,
      //     // normal: {
      //     //   show: false,
      //     //   position: "top",
      //     //   // formatter: (e) => {
      //     //   //    return e.value + '次';
      //     //   // },
      //     //   fontSize: 16,
      //     //   color: "rgba(211, 228, 254, 1)",
      //     //   offset: [0, -10],
      //     // },
      //   },
      //   // itemStyle: {
      //   //   color: "transparent",
      //   // },

      //   data: item.qian,
      // }
    );
  });
  state.option = {
                       tooltip:{
                        trigger: "item",
    backgroundColor: "#113A98",
    borderColor: "#113A98",
    formatter:function(params){
      let dataIndex = params.dataIndex
      let houdata = datas[0].hou[dataIndex]
       let qianata = datas[0].qian[dataIndex]
       let html = \`
        <div class='bg-tooltip'>
         <div>
                  \${params.name}
                </div>
               
<div class="aic">
                  <div style="width: 10px;height: 10px;background-color:#4C72A2;border-radius:4px;"></div>
                  <div style="margin-left: 10px;">\${legendArr[0]}</div>
                  <div style="margin-left: 10px;">\${houdata}万元</div>
                </div> 

                 <div class="aic">
                  <div style="width: 10px;height: 10px;background-color: \${colorArr[1].CubeLeft2[0]};border-radius:4px;"></div>
                  <div style="margin-left: 10px;">\${legendArr[1]}</div>
                  <div style="margin-left: 10px;">\${qianata}万元</div>
                </div> 
       \`;
     
        return html+' </div>';
    }
        },
    grid: {
      // left: 40,
      // right: 40,
      top: "20%",
      bottom: "20%",
      // containLabel: true
    },
    yAxis: getYAxis(),
    xAxis: {
      type: "category",
      data: xData,
      axisLine: {
        show: true,
        lineStyle: {
          color: "#045d79",
          // width: 2
        },
      },
      axisTick: {
        show: false,
      },
      axisLabel: {
        color: "white",
        overflow:'breakAll',
        fontSize: 14,
        interval:0,
         width:12,
      },
    },
    legend: {
      right: "20",
      top: "10",
      show: true,
      // selectedMode: false, // 取消图例点击事件 目前图例显示隐藏指标值位置会错误
      textStyle: {
        color: "white",
        fontSize: 16,
      },
      data: legendArr.map((item, index) => {
        return {
          name: item,
          textStyle: {
            color: "white",
            fontSize: 16,
          },
          itemStyle: {
            color: colorArr[index].CubeTop2[0],
          },
        };
      }),
    },
    series: series,
  };
  let echartsMapel = ref("");
  let opt = null;
  const echartsMap = (e) => (echartsMapel.value = e);
  const init = () => {
    let myChart = echarts.init(echartsMapel.value);
    myChart.setOption(state.option);
    const setOption = (dataObj) => {
      let opt = myChart.getOption();
      Object.assign(opt, dataObj);
      myChart.setOption(opt);
    };
    return setOption;
  };
  const handleRun = (val) => {
    opt(val);
  };
  onMounted(() => {
    setTimeout(() => {
      opt = init();
    }, 500);
    window.addEventListener("resize", () => {
      opt();
    });
  });
  </script>
  <style  >
  .content {
    position: relative;
    width: 100%;
    height: 100%;
    box-shadow: 0px 3px 50px 1px rgba(0, 101, 175, 0.4);
  }
  #mainChina {
    width: 100%;
    height: 600px;
    background-color: #00184F;
  }
    .bg-tooltip{
background: #113A98;
border-radius: 2px 2px 2px 2px;
padding:1px 3px;

font-weight: 500;
font-size: 14px;
color: #D3E4FE;
}
.aic {
  align-items: center;
  display: flex;
}
  </style>
  
    
    
    
    
    
    `;
  };
  